<template>
     <div class="edit-popup">
      <!-- 我的频道 -->
      <!-- 标题 -->
      <van-cell title="我的频道">
          <van-button round size="small" class="edit-btn" @click="isEdit = !isEdit">
              {{ isEdit? '完成' : '编辑' }}
          </van-button>
      </van-cell>
      <!-- 频道 -->
      <div class="my-pannel">
       <van-grid :border="false">

           <van-grid-item
           v-for="item in myChannels"
           :key="item.id"
           :text="item.name"
           :class="{active: constantChannels.includes(item.name)}"
           @click="bianjitiaozhuan(item)"
           >
              <template #icon>
                 <van-icon v-if="isEdit && !constantChannels.includes(item.name) " name="cross" size="0.33333rem" />
              </template>
           </van-grid-item>

         </van-grid>
      </div>
    
      <!-- 推荐频道 -->
      <!-- 标题 -->
      <van-cell title="推荐频道"/>
      <!-- 频道 -->
      <div class="recommend-pannel">
       <van-grid :border="false">
           <van-grid-item
           v-for="item in recommendChannels"
           :key="item.id"
           :text="item.name"
           @click="$emit('add-channel', item)"
           >
              <template #icon>
                <van-icon  name="plus" size="0.33333rem" />
              </template>
           </van-grid-item>
         </van-grid>
      </div>
     </div> 
</template>

<script>
import { getAllChannelsAPI } from '@/api'
export default {
    props: { 
        myChannels: {
            type: Array,
            required: true
        }
     },

    data() {
        return {
            isEdit: false,
            constantChannels: ['推荐'],
            allChannels:[]
        }
    },
    created() {
        this.getAllChannels()
    },

    computed: {
        recommendChannels() {
            //传一个频道的id 判断这个频道是否在MyChannels里
            const isIncludeInMychannels = (id) =>
                !!this.myChannels.find((item) => item.id === id)

           //所有的频道里 筛选出 我的频道
           //isIncludeInMychannels(item.id) 看所有的每一项 是否在我的频道
           return this.allChannels.filter((item) => !isIncludeInMychannels(item.id))
       }  
    },

    methods: {
        async getAllChannels() {
            const { data } = await getAllChannelsAPI()
            this.allChannels = data.data.channels
        },

        bianjitiaozhuan({ id, name }, index) {
            if (this.isEdit) { 

                if (!this.constantChannels.includes(name)) { 
                    //  console.log('删除',id);
                    this.$emit('delete-channel', id)
                }
            } else {
                // console.log('跳转');
                this.$emit('update-active' , index)
            }
         }
    }
}
</script>

<style scoped lang="less">
.edit-popup {
    padding-top: 1.33335rem;
}

.edit-btn {
  border-color: red;
  color: red;
  width: 1.38667rem;
  height: 0.64rem;
}

:deep(.van-grid-item__content) {
  width: 175px;
  height: 86px;
  margin: 0 auto 10px;
  background-color: #f4f5f6;
}
.my-pannel {
  // 编辑按钮
  .editBtn {
    width: 104px;
    height: 48px;
    border-color: red;
    color: red;
  }

  // 编辑按钮居中
  .van-cell__value {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  // 关闭按钮样式
  :deep(.van-grid-item__content) {
    position: relative;

    .van-grid-item__icon-wrapper {
      position: absolute;
      top: 0;
      right: 0;

      .van-icon-cross {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(20%, -35%);
        border: 0.02667rem solid #000;
        border-radius: 50%;
        text-align: center;
        line-height: 0.32rem;
      }
    }
  }
}
// 推荐频道
.recommend-pannel {
  // 推荐频道加号样式
  :deep(.van-grid-item__content) {
    flex-direction: row;

    .van-grid-item__icon {
      font-size: 0.3rem;
    }

    .van-grid-item__text {
      margin-top: 0;
    }
  }
}

.active {
    :deep(.van-grid-item__text) {
        color: red;
    }
}
</style>